<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>动态组件</title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>

		<div class="container">
			<button @click="flag='my-hello'">显示hello组件</button>
			<button @click="flag='my-world'">显示world组件</button>

			<!-- <div>
				<my-hello></my-hello>
				<my-world></my-world>
			</div> -->
			
			<div>
				<keep-alive>
					<component :is="flag"></component>
				</keep-alive>
			</div>
			
		</div>

		

		<script type="text/javascript">
			var vm = new Vue({
				// el:'.container',
				data:{
					flag:'my-hello'
				},
				components:{
					'my-hello':{
						template:'<h2>我是hello组件{{x}}</h2>',
						data(){
							return {
								x:Math.random()
							}
						}
					},
					'my-world':{
						template:'<h2>我是world组件{{y}}</h2>',
						data(){
							return {
								y:Math.random()
							}
						}
					}
				}
			});
			
		</script>
	</body>
	</html>	